<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>custoLinks</title>
		<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
	</head>

	<body>
		<p>
			<a href="#" class="tooltip" title="这是我的超链接提示1."> 提示1.</a>
		</p>
		<p>
			<a href="#" class="tooltip" title="这是我的超链接提示2."> 提示2.</a>
		</p>
		<div class="content" style="display: none;">
			asdasdsadadasdasdsadadasdadasdsadads.
		</div>
		<!--<p>
			<a href="#" title="这是自带提示1."> 自带提示1.</a>
		</p>
		<p>
			<a href="#" title="这是自带提示2."> 自带提示2.</a>
		</p>-->
		<script>
			$(function() {
				var x = 100;
				var y = 200;
				$("a.tooltip").mouseover(function(e) {
					//获取到光标相对于页面的Y坐标
					//					var py = e.pageY;
					//					alert(py);
					this.mytitle = this.title;
					this.title = "";
					var tooltip = "<div id='tooltip'>" + this.mytitle + "</div>";
					$("body").append(tooltip);
										var pyy = e.pageY;
										var pxx = e.pageX;
					$("#tooltip").css("left",(pxx+x) + "px");
					$("#tooltip").css("top",(pyy+y) + "px");
					$("#tooltip").css("position","absolute");
					$("#tooltip").show("fast");
				}).mouseout(function() {
					this.title = this.mytitle;
					$("#tooltip").remove();
				}).mousemove(function(e) {
					$("#tooltip")
						.css({
							"top": (e.pageY + y) + "px",
							"left": (e.pageX + x) + "px"
						});
				});
			})
		</script>

	</body>

</html>